<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Multi Page Menu -->
    <link rel="stylesheet" href="multi-page-menu.css">
    <script type="module" src="multi-page-menu.js"></script>

    <script defer src="popup.js"></script>

    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            color-scheme: dark;
            background-color: #202124;
            font-family: Segoe UI, system-ui, -apple-system, sans-serif;
            font-size: 0.8em;
            color: #e8eaed;
            margin: 0;
            overflow: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button {
            user-select: none;
            background: none;
            border: none;
            font-family: inherit;
            color: inherit;
            cursor: pointer;
        }

        svg {
            fill: currentColor;
        }

        #header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin: 0 -4px 12px -4px;
            text-align: center;
        }

        #header #logo {
            background-image: url(./icon_128.png);
            background-size: 100%;
            height: 28px;
            aspect-ratio: 1;
            margin-right: 8px;
        }

        #header #title {
            font-size: 1rem;
            font-weight: 600;
            margin-top: 5px;
            margin-bottom: 10px;
        }

        #header #meta {
            color: #b1b1b1;
        }

        .switch {
            --height: 26px;
            --width: 50px;
            --padding: 3px;
            --transition-duration: .3s;
            position: relative;
            display: inline-block;
            height: var(--height);
            width: var(--width);
        }

        .switch input {
            display: none;
        }

        .switch .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            padding: var(--padding);
            background-color: #cacad0;
            border-radius: 99rem;
            transition: background var(--transition-duration);
        }

        .switch .slider:before {
            content: "";
            display: block;
            height: 100%;
            aspect-ratio: 1;
            background-color: #fff;
            border-radius: 50%;
            transition: transform var(--transition-duration);
        }

        .switch input:checked + .slider {
            background-color: #2196F3;
        }

        .switch input:checked + .slider:before {
            transform: translateX(calc(var(--width) - var(--height)));
        }

        #logArea {
            width: 100%;
            flex: 1;
            resize: none;
            background: #2f2f33;
            color: #b8b8c7;
            font-size: 0.9em;
        }

        #debugErrorWarning {
            background: #dd4a4a;
            margin-right: 4px;
            border-radius: 99rem;
            font-size: 0.72rem;
            padding: 4px 8px;
        }

        #githubIssueNotice {
            margin-top: -20px;
            margin-bottom: 5px;
        }

        #githubIssueLink {
            color: #2196F3;
        }

        #multi-page-menu .menu-item.button.danger {
            margin-top: 10px;
            text-align: center;
            background: hsl(0deg 96% 62% / 10%);
            color: #f54545;
            height: 42px;
        }

        #multi-page-menu .menu-item.button.danger:hover {
            background: hsl(0deg 100% 80% / 10%)
        }

        #multi-page-menu .page[data-id="settings"] .menu-item.button:not(.danger):last-of-type {
            margin-bottom: auto;
        }
    </style>
</head>
<body>
    <div id="multi-page-menu">
        <div class="page" data-id="main" active>
            <div id="header">
                <div id="logo"></div>
                <h1 id="title">Age Restriction Bypass for YouTube™</h1>
                <div id="meta">Version %version%</div>
            </div>
            <label class="menu-item button">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 512 512" width="24px" fill="#000000"><path d="M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256V32C224 14.33 238.3 0 256 0C273.7 0 288 14.33 288 32V256zM80 256C80 353.2 158.8 432 256 432C353.2 432 432 353.2 432 256C432 201.6 407.3 152.9 368.5 120.6C354.9 109.3 353 89.13 364.3 75.54C375.6 61.95 395.8 60.1 409.4 71.4C462.2 115.4 496 181.8 496 255.1C496 388.5 388.5 496 256 496C123.5 496 16 388.5 16 255.1C16 181.8 49.75 115.4 102.6 71.4C116.2 60.1 136.4 61.95 147.7 75.54C158.1 89.13 157.1 109.3 143.5 120.6C104.7 152.9 80 201.6 80 256z"/></svg>
                </div>
                <span>Enabled</span>
                <label class="switch">
                    <input type="checkbox" name="extensionEnabled">
                    <span class="slider"></span>
                </label>
            </label>
            <button class="menu-item button" data-link="settings">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>
                </div>
                <span>Settings</span>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg>
                </div>
            </button>
            <button class="menu-item button" data-link="debug">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 432.458 432.458" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/> <g id="XMLID_311_"><path id="XMLID_835_" d="M322.743,106.629c-2.778-4.518-5.731-8.889-8.873-13.08c-25.777-34.375-60.453-53.307-97.641-53.307s-71.864,18.932-97.641,53.307c-3.143,4.191-6.095,8.562-8.874,13.08c20.061,31.973,60.275,53.85,106.514,53.85C262.469,160.479,302.683,138.602,322.743,106.629z" /><path id="XMLID_1453_" d="M417.458,201.755h-65.606c-0.808-12.567-2.625-24.87-5.406-36.742l51.575-51.576c5.858-5.858,5.858-15.355,0-21.213c-5.857-5.858-15.355-5.858-21.213,0l-25.966,25.966c-7.348,12.845-17.202,24.674-29.365,35.028c-24.637,20.972-56.246,33.718-90.248,36.621v202.376c31.443-4.39,60.365-22.55,82.641-52.255c3.907-5.21,7.536-10.687,10.881-16.395l52.058,52.058c2.929,2.929,6.768,4.393,10.607,4.393c3.838,0,7.678-1.465,10.606-4.393c5.858-5.858,5.858-15.355,0-21.213l-59.579-59.58c7.427-19.594,11.986-40.927,13.41-63.076h65.606c8.284,0,15-6.716,15-15C432.458,208.471,425.742,201.755,417.458,201.755z" /><path id="XMLID_1457_" d="M201.23,189.84c-34.003-2.903-65.612-15.649-90.249-36.621c-12.163-10.354-22.017-22.183-29.365-35.028L55.65,92.224c-5.858-5.858-15.356-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l51.575,51.575c-2.78,11.873-4.598,24.175-5.406,36.742H15c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h65.606c1.424,22.149,5.983,43.482,13.41,63.076l-59.579,59.579c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.858,15.355,5.858,21.213,0l52.058-52.058c3.345,5.708,6.974,11.185,10.881,16.395c22.274,29.705,51.197,47.866,82.641,52.255V189.84z" /> </g></svg>
                </div>
                <span>Debug Log</span><span id="debugErrorWarning"></span>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"/></svg>
                </div>
            </button>
            <a class="menu-item button" href="https://github.com/zerodytrash/Simple-YouTube-Age-Restriction-Bypass/" target="_blank">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                </div>
                <span>GitHub</span>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z"/></svg>
                </div>
            </a>
        </div>
        <div class="page" data-id="settings">
            <div class="header menu-item">
                <button class="icon" data-link="main">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
                </button>
                <span>Settings</span>
            </div>
            <label class="menu-item button">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="0 0 512 512" width="22px" fill="#000000"><path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>
                </div>
                <span>Skip Content Warnings</span>
                <label class="switch">
                    <input type="checkbox" name="skipContentWarnings">
                    <span class="slider"></span>
                </label>
            </label>
            <label class="menu-item button">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-1.29 1.29c-.63.63-.19 1.71.7 1.71h13.17c.89 0 1.34-1.08.71-1.71L18 16z"/></svg>
                </div>
                <span>Unlock Notification</span>
                <label class="switch">
                    <input type="checkbox" name="unlockNotification">
                    <span class="slider"></span>
                </label>
            </label>
            <label class="menu-item button">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 448 512" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/></svg>
                </div>
                <span>Unlock Confirmation (embed)</span>
                <label class="switch">
                    <input type="checkbox" name="unlockConfirmation">
                    <span class="slider"></span>
                </label>
            </label>
            <button id="reset" class="menu-item button danger">
                <span>Reset to defaults</span>
            </button>
        </div>
        <div class="page" data-id="debug">
            <div class="header menu-item">
                <button class="icon" data-link="main">
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
                </button>
                <span>Debug Log</span>
            </div>

            <div id="githubIssueNotice">
                You can report bugs by creating a <a href="#" id="githubIssueLink">GitHub issue</a>.
            </div>

            <textarea readonly id="logArea"></textarea>
        </div>
    </div>
</body>
</html>
